/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
	details, embed, figure, figcaption, foot, header, hgroup, menu, nav,
	output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, foot, header, hgroup,
	menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* start editing from here */
a {
	text-decoration: none;
}

.txt-rt {
	text-align: right;
} /* text align right */
.txt-lt {
	text-align: left;
} /* text align left */
.txt-center {
	text-align: center;
} /* text align center */
.float-rt {
	float: right;
} /* float right */
.float-lt {
	float: left;
} /* float left */
.clear {
	clear: both;
} /* clear float */

.pos-relative {
	position: relative;
} /* Position Relative */
.pos-absolute {
	position: absolute;
} /* Position Absolute */
.vertical-base {
	vertical-align: baseline;
} /* vertical align baseline */
.vertical-top {
	vertical-align: top;
} /* vertical align top */
.underline {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
	margin: 0 0 20px 0;
} /* Add 5px bottom padding and a underline */
nav.vertical ul li {
	display: block;
} /* vertical menu */
nav.horizontal ul li {
	display: inline-block;
} /* horizontal menu */
img {
	max-width: 100%;
	display: block;
}

.copyrights {
	text-indent: -9999px;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
/*end reset*/
body {
	color: #959595;
	font-family: trebuchet ms;
	text-align: justify;
}

.wrap {
	margin: 0 auto;
	width: 1024px;
}

#header {
	background: #71b47e;
	height: 228px;
}

.logo {
	width: 400px;
	height: 85px;
	float: left;
	margin: 30px 0 0 0;
}

.logo h1 a {
	color: #121212;
	font: bold 32px/1.2em Arial, Helvetica, sans-serif;
}

.logo h2 {
	margin: 0;
	padding-left: 120px;
	color: #121212;
	font: .8em Arial, Helvetica, sans-serif;
}

.nav {
	float: right;
	margin: 45px 0 0 0;
}

.nav li {
	display: inline;
	float: left;
	padding: 0 10px;
}

.nav li a {
	display: block;
	padding: 4px 7px;
	color: #121212;
	font-weight: bold;
}

.nav li a:hover {
	color: #447B2E;
	border-bottom: 2px solid #aaa;
}

.nav li a.selected {
	color: #447B2E;
	border-bottom: 2px solid #aaa;
}
/*banner����Ч��*/
.banner {
	color: #000;
	width: 100%;
	font-size: 16px;
	font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

.texts {
	line-height: 36px;
	padding: 55px 0 0 40px;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
}

.texts p {
	-webkit-transition: all 1.0s;
	-moz-transition: all 1.0s;
	-o-transition: all 1.0s;
	transition: all 1.0s;
	/*让过渡效果持续 1秒*/
	transition-duration: 1.5s;
	-moz-transition-duration: 1.5s; /* Firefox 4 */
	-webkit-transition-duration: 1.5s; /* Safari 和 Chrome */
	-o-transition-duration: 1.5s;

	-webkit-transform: translate(50px);   /* Safari 和 Chrome */
	-moz-transform: translate(50px); /* Firefox 4 */
	-o-transform: translate(50px);   /* Opera */
	-ms-transform: translate(50px);
	transform: translate(50px);
}

.texts p:hover {
	padding-left: 25px
}

.texts p:nth-child(1) {
	-webkit-animation: animations 1.5s ease-out 0.5s backwards;
	-moz-animation: animations 1.5s ease-out 0.5s backwards;
	-o-animation: animations 1.5s ease-out 0.5s backwards;
	-ms-animation: animations 1.5s ease-out 0.5s backwards;
	animation: animations 1.5s ease-out 0.5s backwards;
	/*让过渡效果持续 1秒*/
	transition-duration: 1.5s;
	-moz-transition-duration: 1.5s; /* Firefox 4 */
	-webkit-transition-duration: 1.5s; /* Safari 和 Chrome */
	-o-transition-duration: 1.5s;
}

.texts p:nth-child(2) {
	-webkit-animation: animations 1.5s ease-out 1.5s backwards;
	-moz-animation: animations 1.5s ease-out 1.5s backwards;
	-o-animation: animations 1.5s ease-out 1.5s backwards;
	-ms-animation: animations 1.5s ease-out 1.5s backwards;
	animation: animations 1.5s ease-out 1.5s backwards;
	/*让过渡效果持续 1秒*/
	transition-duration: 1.5s;
	-moz-transition-duration: 1.5s; /* Firefox 4 */
	-webkit-transition-duration: 1.5s; /* Safari 和 Chrome */
	-o-transition-duration: 1.5s;
}

.texts p:nth-child(3) {
	-webkit-animation: animations 1.5s ease-out 2.5s backwards;
	-moz-animation: animations 1.5s ease-out 2.5s backwards;
	-o-animation: animations 1.5s ease-out 2.5s backwards;
	-ms-animation: animations 1.5s ease-out 2.5s backwards;
	animation: animations 1.5s ease-out 2.5s backwards;
	/*让过渡效果持续 1秒*/
	transition-duration: 1.5s;
	-moz-transition-duration: 1.5s; /* Firefox 4 */
	-webkit-transition-duration: 1.5s; /* Safari 和 Chrome */
	-o-transition-duration: 1.5s;
}

@-webkit-keyframes animations{
	0%{
	-webkit-transform: translate(0);
	opacity: 0;
	}
	50%{
	-webkit-transform:translate(30px);
	opacity:.5;
	}
	100%{
	-webkit-transform:translate(60px);
	opacity:1;
	}
}
@-moz-keyframes animations { 0% {
	-moz-transform: translate(0);
	opacity: 0;
}

50%
{
-moz-transform


:translate(30px)


;
opacity


:


.5


;
}
100%
{
-moz-transform


:translate(60px)


;
opacity


:


1;
}
}
@-o-keyframes animations { 0% {
	-o-transform: translate(0);
	opacity: 0;
}

50%
{
-o-transform


:translate(30px)


;
opacity


:


.5


;
}
100%
{
-o-transform


:translate(60px)


;
opacity


:


1;
}
}
@-ms-keyframes animations { 0% {
	-ms-transform: translate(0);
	opacity: 0;
}

50%
{
-ms-transform


:translate(30px)


;
opacity


:


.5


;
}
100%
{
-ms-transform


:translate(60px)


;
opacity


:


1;
}
}
@keyframes animations { 0% {
	transform: translate(0);
	opacity: 0;
}

50%
{
transform


:translate(30px)


;
opacity


:


.5


;
}
100%
{
transform


:translate(60px)


;
opacity


:


1;
}
}
#main {
	padding: 70px 0 100px 0;
}

.foot {
	background: #222;
	padding: 40px;
}

#fbr {
	color: #FAFAFA;
}

#fbr p {
	float: right;
}

#fbr p a {
	color: #FAFAFA;
}

#fbr p a:hover {
	border-bottom: 1px solid green;
}

.ft-nav {
	float: left;
}

.ft-nav li {
	display: inline;
	float: left;
	padding: 0 10px;
}

.ft-nav li a {
	padding: 4px 7px;
	color: #FAFAFA;
}

.ft-nav li a:hover, .ft-nav ul li.active a {
	color: green;
}

/*bloglist����˲��*/
.bloglist h2 {
	border-bottom: #474645 2px solid;
	margin: 0 8px 20px 8px;
	height: 26px;
	overflow: hidden;
	line-height: 28px;
	font-size: 16px;
	font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
	letter-spacing: 2px
}

.bloglist h2 p {
	background: #474645;
	width: 180px;
	color: #fff;
	text-align: center;
	box-shadow: #999 4px 5px 1px;
}

.bloglist h2 p span {
	color: #38b3d4;
}

.blogs {
	margin: 0 20px 20px 20px;
	position: relative;
}

.blogs figure {
	float: left;
	width: 25%;
	overflow: hidden;
}

.blogs figure img {
	width: 100%;
	margin: auto;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.blogs figure:hover img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

.blogs ul {
	float: left;
	line-height: 20px;
	width: 72%;
	color: #474645;
}

.blogs ul:hover {
	cursor: pointer;
}

.autor {
	overflow: hidden;
	clear: both;
	margin: 10px 0 0 0;
	display: inline-block;
	line-height: 26px;
	height: 26px;
	color: #838383;
	background: #f6f6f6;
	width: 100%
}

.autor span {
	margin: 0 10px;
}

.autor span a {
	color: #759b08;
}

a.readmore {
	background: #e41635;
	color: #fff;
	padding: 5px 10px;
	float: right;
	margin: 20px 0 0 0
}

.blogs::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	background: #cac1c1;
	border: 2px solid #fff;
	left: -27px;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.blogs:hover::before {
	background: #474645;
}

.dateview {
	position: absolute;
	left: -182px;
	top: 0px;
	z-index: 1;
	color: #F5F5F5;
	word-wrap: break-word;
	white-space: normal;
}

.blogs::after {
	content: "";
	width: 155px;
	height: 29px;
	position: absolute;
	left: -182px;
	top: -9px;
	z-index: 0;
	background: #474645 no-repeat;
	opacity: 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.blogs:hover::after {
	opacity: 1
}

/*Myfamily.html*/
.left {
	width: 512px;
}

.right {
	width: 512px;
}

.right h2 {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin: 50px auto 10px auto;
	color: #000;
}

.right p {
	text-align: center;
	color: #39F;
}

.pic {
	overflow: hidden;
}

.pic img {
	width: 100%;
	margin: auto;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.pic:hover img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

/*Dynamics.html*/
.talk {
	width: 100%;
	height: 100px;
}

.talk  textarea {
	width: 70%;
	height: 70px;
	margin-left: 50px;
}

.submit {
	width: 20%;
	height: 70px;
	float: right;
	margin-right: 25px;
}

.submit input {
	margin-top: 8px;
}

.submit button {
	margin-top: 10px;
}

.show {
	margin: 0 20px 20px 20px;
	padding:20px 20px 5px 20px;
	position: relative;
	background-color:#c4dcce;
}

.show  figure {
	float: left;
	width: 25%;
	margin-left:8px;
	overflow: hidden;
}

.show  figure img {
	width: 100%;
	margin: auto;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.show  figure:hover img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}
.user_head{
	margin-bottom:10px;
}
.show  ul {
	float: left;
	line-height: 20px;
	width: 72%;
	color: #474645;
}

.show  ul:hover {
	cursor: pointer;
}

.talking {
	width: 98%;
	background-color: #eeeeee;
	margin: 10px auto 25px 5px;
	padding-bottom:0px;
}

.good {
	width: 90%;
	height: 20px;
	margin: 5px auto 0 10px;
}

.good img {
	width: 14px;
	display: inline;
	padding-right: 6px;
}

.talking p {
	color: #000;
	margin: 5px auto 5px 10px;
}

.talking span {
	color: #3b5384;
}

.comment {
	width: 100%;
	padding-bottom: 10px;
}

.comment input {
	width: 400px;
	margin: 5px auto 5px 10px;
}

.comment img {
	width: 20px;
	display: inline;
	vertical-align: middle;
}

.comment button {
	display: block;
	margin-left: 360px;
}

.ui-page-login, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.mui-content {
	height: 100%;
}

@charset "utf-8";
body{color:#333333;}
a{color:#7ac9ed;}
p{margin:0px; padding:0px;}


.txt{
	float:left;
}
.heart {
	float:left;
	background:url(../images/web_heart_animation.png);
	background-position:left;
	background-repeat:no-repeat;
	height:20px;
	width:50px;
	cursor:pointer;
	background-size:2900%;
}
.heart:hover, .heart:focus{
	background-position:right;
}

@-webkit-keyframes heartBlast {
	0% {
		background-position:left;
	}
	100% {
		background-position:right;
	}
}

@keyframes heartBlast {
	0% {
		background-position:left;
	}
	100% {
		background-position:right;
	}
}

.heartAnimation {
	display:inline-block;
	-webkit-animation-name:heartBlast;
	animation-name:heartBlast;
	-webkit-animation-duration:.8s;
	animation-duration:.8s;
	-webkit-animation-iteration-count:1;
	animation-iteration-count:1;
	-webkit-animation-timing-function:steps(28);
	animation-timing-function:steps(28);
	background-position:right;
}
.feed p{font-family:"Microsoft YaHei",'Georgia', Times, Times New Roman, serif; font-size:25px;}
.feed{clear:both; margin-bottom:20px; height:150px; position:relative;}
.likeCount{font-family:'Georgia', Times, Times New Roman, serif; margin-top:32px;margin-left:68px;font-size:25px;color:#999999}
/*Photo.html*/
.wrap ul li {
	float: left;
	margin-right: 20px;
}

.Newphoto {
	width: 200px;
	height: 200px;
	border: 1px dotted #ccc;
}

.con {
	width: 80%;
	height: 80%;
	margin: 10px auto;
}

.con img {
	width: 100%;
	height: 100%;
}

.Newphoto span {
	margin-left: 70px;
}
